<template>
  <NoTabBarPage
    :scroll-props="{ onPulldown, height: '100%' }"
    customClass="mall-page"
  >
    <div class="mall-page__wrapped">
      <div class="mall-page__search">
        <CommonSearch v-model="searchword">
          <template #icon>
            <image
              src="@/assets/jifen/icon-search-1.png"
              className="mall-page__search-icon"
            />
          </template>
          <template #btn>
            <div className="mall-page__search-btn">搜索</div>
          </template>
        </CommonSearch>
      </div>
      <div class="mall-page__list">
        <div class="mall-page__list-nav">
          <div
            v-for="item in navOptions"
            :key="item.value"
            :class="[filters.field === item.value && 'is-active']"
            class="mall-page__list-nav_item"
            @tap="onNavActive(item.value)"
          >
            <span>{{ item.label }}</span>
            <image
              v-if="item.value !== GoodsCategoryEnum.DEFAULT"
              src="@/assets/icon/icon-arrow.png"
              class="mall-page__list-nav_item-icon"
            />
          </div>
        </div>
        <div class="mall-page__list-goods">
          <div class="mall-page__list-goods-wrapped">
            <CommonScroll :pullup-enabled="false" :pulldown-enabled="false">
              <CommonGoods :data="goodsList" @exchange="onExchange" />
            </CommonScroll>
          </div>
        </div>
      </div>
    </div>
  </NoTabBarPage>
</template>

<script setup lang="ts">
import NoTabBarPage from "@/components/common-page/noTabBar-page.vue";
// import CommonNavigateBar from "@/components/common-navigateBar/index.vue";
import CommonSearch from "@/components/common-search/index.vue";
import CommonScroll from "@/components/common-scroll/index.vue";
import CommonGoods from "@/components/common-goods/index.vue";
import { useReady } from "@tarojs/taro";
import "./index.less";
import { ref } from "vue";
import { apiQueryGoodsList } from "@/apis/jifen";
import {
  GoodsCategoryEnum,
  IGoodsListReq,
  IRecommendGoodsItem,
  OrderEnum,
} from "@/apis/types/jifen";
import { useExchangeGood } from "@/hooks/useExchangeGood";
defineOptions({
  name: "mall-page",
});

const navOptions = [
  { label: "默认", value: GoodsCategoryEnum.DEFAULT },
  { label: "积分", value: GoodsCategoryEnum.PRICE },
  { label: "销量", value: GoodsCategoryEnum.EXCHANGE_COUNT },
];

const goodsList = ref<IRecommendGoodsItem[]>([]);
const filters = ref<IGoodsListReq>({
  page: 1,
  pageSize: 10,
  field: GoodsCategoryEnum.DEFAULT,
  order: OrderEnum.ASC,
  name: "",
});
const searchword = ref("");
const { exchangeGood } = useExchangeGood();

useReady(() => {
  queryGoodsListServer();
});

const onPulldown = async (done: Function) => {
  try {
    await queryGoodsListServer();
  } catch (error) {
  } finally {
    done();
  }
};

const onExchange = (goodId: number) => {
  exchangeGood(goodId);
};

const onNavActive = (value: IGoodsListReq["field"]) => {
  if (filters.value.field !== value) {
    filters.value.field = value;
  } else {
    // 相等时, 切换排序
    filters.value.order =
      filters.value.order === OrderEnum.ASC ? OrderEnum.DESC : OrderEnum.ASC;
  }

  filters.value.page = 1;
  filters.value.pageSize = 10;

  queryGoodsListServer();
};

const queryGoodsListServer = () => {
  apiQueryGoodsList(filters.value).then((res: any) => {
    const { code, data } = res;
    if (code === 200) {
      goodsList.value = data.items;
    }
  });
};
</script>
